<template>
<view>
    <view class="tabs-view">
        <u-tabs active-color="#ff5000" :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="changeTabs" bar-width="80"></u-tabs>
    </view>
    <mescroll-body ref="mescrollRef" top="80" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view v-if="tabsCurrent === 0">
            <uni-swipe-action>
                <uni-swipe-action-item v-for="(item, index) in goodsList" :key="index" :right-options="options"  @click="handleDeleteGoodsColl(index)">
                    <navigator :url="'/goods-module/goods?goods_id='+ item.goods_id" hover-class="none" style="width: 100%;">
                        <goods-cell-search
                            :goodsName="item.goods_name"
                            :goodsImg="item.goods_img"
                            :goodsPrice="item.goods_price"
                            :goodsBuyCount="-1"
                            :goodsCommentNum="-1"
                        ></goods-cell-search>
                    </navigator>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>
        <view v-if="tabsCurrent === 1">
            <uni-swipe-action class="shop-collect-container">
                <uni-swipe-action-item v-for="(shop, index) in shopList" :key="index" :right-options="options"  @click="handleDeleteShopColl(index)">
                    <navigator :url="'/pages/shop/shop?tabNum=0&shop_id='+ shop.shop_id" hover-class="none" style="width: 100%;">
                       <shop-cell-search
                           :shopName="shop.shop_name"
                           :shopLogo="shop.logo"
                       ></shop-cell-search>
                    </navigator>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>
    </mescroll-body>
    <loading-view v-if="loading"></loading-view>
</view>
</template>

<script>
    import * as API_Members from '@/api/collection.js'

    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                tabsList: [
                    { name: '商品' },
                    { name: '店铺' }
                ],
                tabsCurrent: 0,
                params: {
                    page_no: 1,
                    page_size: 10
                },
                goodsList: [], //收藏商品
                shopList: [], //收藏店铺
                options: [
                    {
                        text: '取消收藏',
                        style: {
                            backgroundColor: '#ff5000',
                            'font-size': '22rpx',
                            'font-weight': '600'
                        }
                    }
                ],
                down: {
                    auto: false
                },
                loading: true
			}
		},
		methods: {
            downCallback() {
                this.changeTabs(this.tabsCurrent)
            },
            upCallback(page) {
                this.params.page_no = page.num
                if (this.tabsCurrent === 0) {
                    this.getCollection()
                } else {
                    this.getShopCollection()
                }
            },
            changeTabs(index) {
                this.tabsCurrent = index
                this.goodsList = []
                this.shopList = []
                this.params.page_no = 1
                if (this.tabsCurrent === 1) {
                    this.shopList = []
                    this.getShopCollection()
                } else {
                   this.goodsList = []
                   this.getCollection()
                }
            },

            // 获取收藏的店铺
            getShopCollection() {
                API_Members.getShopCollection(this.params).then(response => {
                    const { data } = response
                    if(data && data.length) {
                        data.forEach(key => { key.show = false })
                        this.shopList = this.shopList.concat(data)
                    }
                    this.mescroll.endBySize(data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            //左滑取消店铺收藏
            handleDeleteShopColl(index) {
                const shop_id = this.shopList[index].shop_id
                API_Members.deleteShopCollection(shop_id).then(() => {
                    this.params.page_no = 1
                    this.shopList = []
                    this.getShopCollection()
                })
            },
            // 获取收藏的商品
            getCollection() {
                API_Members.getGoodsCollection(this.params).then(response => {
                    const { data } = response
                    if(data && data.length) {
                        data.forEach(key => { key.show = false })
                        this.goodsList = this.goodsList.concat(data)
                    }
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            //左滑取消商品收藏
            handleDeleteGoodsColl(index) {
                const goods_id = this.goodsList[index].goods_id
                API_Members.deleteGoodsCollection(goods_id).then(() => {
                    this.params.page_no = 1
                    this.goodsList = []
                    this.getCollection()
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .item {
        display: flex;
        padding: 20rpx;
    }

    .title {
        text-align: left;
        font-size: 28rpx;
        color: $u-content-color;
        margin-top: 20rpx;
    }
</style>
